<template>
  <div class="app-container">
    <el-button @click="handleAddRole">new Role</el-button>
    <el-table :data="rolesList" border>
      <el-table-column label="key" align="center">
        <template slot-scope="scope">
          {{ scope.row.key }}
        </template>
      </el-table-column>
      <el-table-column label="name" align="center">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="description" align="left">
        <template slot-scope="scope">
          {{ scope.row.description }}
        </template>
      </el-table-column>
      <el-table-column label="operations" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)">Edit</el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" :title="dialogType === 'edit' ? 'edit': 'create'">
      <el-form :model="role" label-position="left" label-width="80px">
        <el-form-item label="name">
          <el-input v-model="role.name" placeholder="role name" />
        </el-form-item>
        <el-form-item label="desc">
          <el-input v-model="role.description" type="textarea" placeholder="role description" />
        </el-form-item>
        <el-form-item label="menus">
          <el-tree ref="tree" :data="routesData" :props="defaultProps" node-key="path" show-checkbox />
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import path from 'path'
import { getRoutes, getRoles, addRole, updateRole, deleteRole } from '@/api/role'
export default {
  name: 'RolePermission',
  data() {
    return {
      rolesList: [],
      routesList: [],
      dialogVisible: false,
      dialogType: 'create',
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      role: {
        key: '',
        name: '',
        description: '',
        routes: []
      }
    }
  },
  computed: {
    routesData() {
      return this.routesList
    }
  },
  created() {
    this.getRoutes()
    this.getRoles()
  },
  methods: {
    getRoutes() {
      getRoutes().then(res => {
        const routes = res.data
        this.routesList = this.generateRoutes(routes)
      })
    },
    getRoles() {
      getRoles().then(res => {
        this.rolesList = res.data
      })
    },
    handleAddRole() {
      this.dialogType = 'create'
      this.dialogVisible = true
      console.log(this.routesList)
    },
    handleEdit(scope) {
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.role = scope.row
      this.$nextTick(() => {
        const routes = this.generateRoutes(this.role.routes)
        this.$refs.tree.setCheckedNodes(this.generateArr(routes))
      })
    },
    handleDelete(scope) {

    },
    generateRoutes(routes, basePath = '/') {
      const res = []
      routes.forEach(route => {
        if (!route.hidden) {
          const onlyOneChild = this.hasOnlyOneChild(route.children, route)
          if (route.children && onlyOneChild) {
            route = onlyOneChild
          }
          const tmp = {
            path: path.resolve(basePath, route.path),
            title: route.meta && route.meta.title
          }
          if (route.children) {
            tmp.children = this.generateRoutes(route.children, tmp.path)
          }
          res.push(tmp)
        }
      })
      return res
    },
    generateArr(routes) {
      let data = []
      routes.forEach(route => {
        data.push(route)
        if (route.children) {
          const temp = this.generateArr(route.children)
          if (temp.length > 0) {
            data = [...data, ...temp]
          }
        }
      })
      return data
    },
    hasOnlyOneChild(children = [], parent) {
      let onlyOneChild = null
      children = children.filter(item => !item.hidden)
      if (children.length === 1) {
        onlyOneChild = children[0]
        onlyOneChild.path = path.resolve(parent.path, onlyOneChild.path)
        return onlyOneChild
      }
      if (children.length === 0) {
        onlyOneChild = { ...parent, path: '' }
      }
      return false
    }
  }
}
</script>
